<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>体育圈子</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/font-awesome-4.3.0/css/font-awesome.css">
    <!-- <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/hammer.js/2.0.4/hammer.min.js"></script>
    <script>
    window.jQuery || document.write('<script src="js/jquery-2.1.4.min.js"><\/script>');
    window.hammer || document.write('<script src="js/hammer.min.js"><\/script>');
    </script> -->
</head>

<body>
    <div class="nav-wamp">
        <nav class="nav" id="nav">
            <ul class="fix">
                <li class="active">
                    <a href="#" title="">精选攻略</a>
                </li>
                <li>
                    <a href="#" title="">热门商品</a>
                </li>
            </ul>
        </nav>
    </div>
    <div class="index-tab-left tab-qiehuan">
    </div>
    <div class="index-tab-right tab-qiehuan" style="display: none;">
    </div>
    <script>
    var oNav = document.getElementById('nav'),
        aLi = oNav.getElementsByTagName('li'),
        aIndex_tab = document.getElementsByClassName('tab-qiehuan');

    for (var i = 0; i < aLi.length; i++) {
        aLi[i].index = i;
        aLi[i].onclick = function() {
            for (var i = 0; i < aLi.length; i++) {
                aLi[i].className = '';
                aIndex_tab[i].style.display = 'none';
            }
            this.className = 'active';
            aIndex_tab[this.index].style.display = 'block';

        };
    }
    </script>
</body>

</html>
